<template>
  <div class="box">
    <p class="title">
      商品管理
      <el-button type="primary" class="btn" @click="add('ShopAdd')">+添加商品</el-button>
    </p>
    <!-- 模糊搜索 -->

    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="searchType" placeholder="查询条件">
          <el-option label="按商品id查询" value="ID" aria-selected></el-option>
          <el-option label="按商品名称查询" value="Name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchName" placeholder="关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          style="background:#337AB7;width:50px;height:36px"
          @click="search()"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="shopList" stripe style="width: 100%">
      <el-table-column label="ID" width="180">
        <template slot-scope="scope">
          <p>{{scope.row.id}}</p>
        </template>
      </el-table-column>

      <el-table-column label="咨询">
        <template slot-scope="scope">
          <p>{{scope.row.name}}</p>
          <p>{{scope.row.subtitle}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope" column-key>
          <!-- status  2已下架  1在售 -->
          <span>{{scope.row.status | types}}</span>
          <el-button
            size="mini"
            type="warning"
            style="margin-left:20px"
            @click="open2(scope.$index, scope.row)"
          >{{scope.row.status | types2}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <a @click="add2('ViewProduct',scope.row.id)">查看</a>
          <br />
          <a @click="add('UpdateMerchandise')">编辑</a>
        </template>
        
      </el-table-column>
    </el-table>
    <!-- 公共组件分页器 -->
    <sorter :total="total" v-on:sorter="handleCurrentChange"></sorter>
   
  </div>
</template>
<script>
import { goodsList } from "@/request/http";
import { goodsPage } from "@/request/http";
import { shopListSearch } from "@/request/http";
import { shopSearchPagination } from "@/request/http";
import { shopSale } from "@/request/http";
import sorter from "@/common/sorter"         //公共组件分页器
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
export default {
    components:{
        sorter
    },
    data() {
        return {
            shopList: [],
            searchType: "", //查询条件
            searchName: "", //关键字
            that: this,
            currentPage3: 1,
            pageNum: 1,
            total: 0,
            flag: false,
            type: ""
        };
    },
    
    methods: {
        shop() {
            goodsList().then(res => {
                // console.log(res.data.data.list);
                this.shopList = res.data.data.list;
                this.total = res.data.data.total;
            });
        },
        handleCurrentChange(val) {
            if (!this.flag) {
                //搜索前的分页
                this.pageNum = val;
                goodsPage(this.pageNum).then(data => {
                console.log(data.data.data.list);
                this.shopList = data.data.data.list;
                }),
                console.log(`当前页: ${val}`);
            } else {
                this.pageNum = val;
                shopSearchPagination({
                listType: "search",
                pageNum: this.pageNum,
                [this.type]: this.searchName
                }).then(data => {
                console.log(data.data.data.list);
                this.shopList = data.data.data.list;
                }),
                console.log(`当前页: ${val}`);
            }
        },
        //模糊搜索
        async search() {
            console.log(this.searchType, this.searchName);
            //首先第一步：判断参数名是 productId 还是 productName
            if (this.searchType == "ID") {
                this.type = "productId";
            } else {
                this.type = "productName";
            }
            //搜索
            if (this.searchName == "") {
                //关键字为空时
                this.flag = false;
                this.shop();
            } else {
                this.flag = true;
                const res = await shopListSearch({
                listType: "search",
                pageNum: 1,
                [this.type]: this.searchName
                });
                this.shopList = res.data.data.list;
                this.total = res.data.data.total;
            }
        },
        open2(index, row) {
            var open = "";
            if (row.status == 1) {
                open = "下架";
            } else {
                open = "上架";
            }
            this.$confirm("确定要" + open + "该商品吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                var status = 0;
                if (row.status == 1) {
                    status = 2;
                } else {
                    status = 1;
                }
                shopSale({ productId: row.id, status: status }).then(res => {
                    alert(res.data.data);
                    if (res.data.status == 0) {
                    this.shop();
                    }
                });
        }).catch(() => {});
    },
    add(str) {
      this.$router.push(str);
    },
    ...mapMutations("a",['changCtiyValue']),
    add2(str,id){
      this.$router.push(str);
      this.changCtiyValue(id)
    }
  },
  mounted() {
    this.shop();
  },
  filters: {
    types(val) {
      return val == 2 ? "以下架" : "在售";
    },
    types2(val) {
      return val == 2 ? "上架" : "下架";
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/Scss/index.scss";
* {
  margin: 0;
  padding: 0;
}
.box {
  //   width: 100%;
  height: 100%;
  padding: 2rem;
  height: 92vh;
  overflow: scroll;
  background: #F3F3F3;
  .title {
    width: 100%;
    height: 8%;
    font-size: 40px;
    .btn {
      width: 10%;
      height: 60%;
      float: right;
    }
  }
  .form-inline {
    width: 100%;
    height: 15%;
    display: flex;
    .form-group {
      display: block;
      margin-right: 30px;
    }
  }
}
.demo-form-inline{
  @include Pd(1rem 0 1rem 0);
}
</style>